<template>
	<view>
		<view class="one" v-show="show === 1">
			<div class='tips'>请输入你需要绑定的手机号</div>
			<div class='setBox'>
				<u--form
					labelPosition="left"
					labelWidth='150'
					labelAlign='center'
					:label-style="{'font-weight':'600','font-size':'30rpx'}"
					:model="model"
					:rules="rules"
					ref="form1">
					<u-form-item
						label="国家和地区"
						prop="userInfo.sex"
						borderBottom
						@click="showSex = true"
						ref="item1"
					>
						<u--input
							v-model="model.userInfo.sex"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择国家和地区"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="新手机号"
						prop="userInfo.newphone"
						borderBottom
						ref="item1">
						<u--input
							v-model="model.userInfo.newphone"
							border="none"
							placeholder="请输入新手机号" maxlength="11"
						></u--input>
					</u-form-item>
				</u--form>
				<u-action-sheet
					:show="showSex"
					:actions="actions"
					title="请选择国家和地区"
					@close="showSex = false"
					@select="sexSelect"
				>
				</u-action-sheet>
				<div class='btn'>
					<u-button color='#2ED8C4' text="下一步" @click='next'></u-button>
				</div>
			</div>
		</view>
		<view class="two" v-show="show === 2">
			<div class='tips'>请输入 {{model.userInfo.newphone}} 收到的短信验证码</div>
			<div class='setBox'>
				<u--form
					labelPosition="left"
					:model="model1"
					ref="form2"
					:rules="rules1"
					labelWidth='100'
					labelAlign='center'
					:label-style="{'font-weight':'600','font-size':'30rpx'}"
				>
					<u-form-item
						label="效验码"
						prop="userInfo.verificationCode"
						borderBottom
						ref="item3">
						<u--input
							v-model="model1.userInfo.verificationCode"
							border="none"  placeholder="请输入您收到的验证码" :disabled='disabled2'>
						</u--input>
						<u-button
							slot="right"
							@tap="getCode"
							:text="tips"
							type="success"
							size="mini"
							:disabled="disabled1"
						></u-button>
					</u-form-item>
				</u--form>
				<div class='btn'>
					<u-button color='#2ED8C4' text="下一步" @click='changePhone'></u-button>
				</div>
				<u-code
					ref="uCode"
					@change="codeChange"
					seconds="20"
					@start="disabled1 = true"
					@end="disabled1 = false"
				></u-code>
			</div>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				show:1,
				showSex: false,
				userdata:[],
				format:null,
				tips: '获取验证码',
				disabled1: false,
				disabled2: true,
				model: {
					userInfo: {
						sex: '',
						newphone: ''
					},
				},
				model1:{
					userInfo: {
						verificationCode:'',
					},
				},
				actions: [
					{
						name: '中国大陆 86',
					},
				],
				rules: {
					'userInfo.newphone': [
						{
							type: 'any',
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								this.format = true
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不合法',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				},
				rules1:{}

			}
		},
		onLoad() {
			this.userdata = uni.getStorageSync("userInfo");
		},
		methods: {
			sexSelect(e) {
				this.model.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			next(){
				if(this.format){
					this.show = 2
				}else{
					uni.showToast({
						title:'请输入手机号',
						icon:"error"
					})
				}
			},
			changePhone(){
				if(this.model1.userInfo.verificationCode != '123456'){
					uni.showToast({
						title:'验证码不正确',
						icon:"error"
					})
				}else{
					// console.log(1)
					this.$api.DLQupdatePhone({id:this.userdata.id,phone:this.model.userInfo.newphone}).then((res)=>{
						console.log(res)
						if(res.code == 200){
							uni.reLaunch({
								url:'/pages/Center/Set/success'
							})
						}else{
							uni.showToast({
								title:'修改失败',
								icon:"error"
							})
						}
					})
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码为：123456');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						this.disabled2 = false
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F4F4F4;
	}
	.tips{
		padding: 30upx;
		font-size: 26upx;
		color: #999999;
	}
	.setBox{
		background-color: #fff;
		.btn{
			background-color: #F4F4F4 ;
			padding: 40upx;
		}
	}
</style>